<template>
	<div class="import-dialog-view" v-loading="loadingFlg">
		<div class="import-dialog">
			<div class="title">
				<p>{{ title }}</p>
				<!-- <p>Excelのインポート（{{ title }}）</p> -->
				<i class="el-icon-close" @click="$emit('CloseExprotDiloag')"></i>
			</div>
			<div class="import-dialog-body">
				<!-- <div class="check-view1">
					<span class="label">取込対象：</span>
					<el-radio v-model="inTarget" :label="1" class="radio-option">設備関連情報</el-radio>
					<el-radio v-model="inTarget" :label="2" class="radio-option">損傷要因</el-radio>
				</div> -->
				<el-upload class="upload-demo" drag :action="action" :multiple="false" ref="upload"
					style="textalign: center" :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :data="form" :file-list="fileList" :headers="token"
					:on-change="handleFileChange">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						<!-- ここにドラッグ或 
						<em>{{ $t("message.homePageTable.finishedFile") }}</em> -->
						ここにドラッグあるいはアップロード
					</div>
				</el-upload>
				<p style="padding-left: 14%;color: #333;margin-top: 40px;">Excel取込を実施すると、画面での「周期見直し中」デ</p>
				<p style="padding-left: 14%;color: #333;">ータは破棄されます。</p>
				<p style="padding-left: 14%;color: #333;">取込データと同一抽出期間のデータが存在した場合、そ</p>
				<p style="padding-left: 14%;color: #333;">のデータは破棄されます。 </p>
				<!-- <div
					:class="$store.state.macType == 2 && title == $t('message.environmentSetting.export.title_6') ? 'check-view' : 'check-view1'">
				</div> -->

				<span slot="footer" class="dialog-footer">
					<el-button @click="onCancel" class="btn">
						{{ $t("message.public.cancel") }}
					</el-button>
					<el-button type="primary" class="btn" @click="submitUpload()">
						{{ $t("message.public.confirm") }}
					</el-button>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
import BASE from "@/utils/base";
import { getLocalStorage } from "@/utils/storage";
import { Message, MessageBox } from "element-ui"
import {
	ImportThickJudgResList
} from "@/api/api1";
export default {
	name: "ImportDialog",
	props: ["title", "_api", "PltCode"],
	data() {
		return {
			action: '',
			inTarget: 1,
			Effective: false,
			form: {
				account: getLocalStorage("userName"),
				userID: getLocalStorage("userID"),
				PltCode: this.PltCode,
			},

			fileList: [],
			token: {
				Authorization:
					"Bearer " +
					(sessionStorage.token && getLocalStorage("token")
						? sessionStorage.token
						: ""),
			},
			sheetName: '',
			sheetList: [],
			fileName: '',
			title7_FilePath: '',
			loadingFlg: false,
		};
	},
	components: {},
	watch: {},
	methods: {

		handleFileChange(file, fileList) {
			// 当文件变化时，更新选择的文件和显示的文件列表  
			this.fileList = file ? [file] : [];
		},
		//文件上传失败触发
		uploadFalse(response, file, fileList) {
			this.loadingFlg = false;
			this.$message({
				message: this.$t("message.homePageTable.euploaded"),
				type: "error",
			});
		},
		//文件上传成功触发
		async uploadSuccess(response, file, fileList) {
			console.log(this._api, fileList);
			if (this.title != this.$t('message.environmentSetting.export.title_7')) {
				// 关闭弹框
				this.fileList = [];
				this.$emit("CloseExprotDiloag");
			}
		},
		// 上传前对文件的大小和类型的判断
		beforeAvatarUpload(file) {

			console.log('file', file.size, file);

			if (file.size > 524288000) {
				this.$message({
					message: this.$t('message.public.tip2'),
					type: "error",
				});
				return false;
			}

		},
		//表单提交
		async submitUpload() {
			if (this.fileList.length === 0) {
				console.error('Please upload file');
				return;
			}
			this.loadingFlg = true;


			const formData = new FormData();
			formData.append('file', this.fileList[0].raw);
			formData.append('PltCode', this.form.PltCode);
			formData.append('userID', this.form.userID);
			formData.append('account', this.form.account);

			let res;

			try {
				res = await ImportThickJudgResList(formData);
				this.loadingFlg = false;

				if (res.data.code === 0) {
					this.$message({
						message: res.data.msg,
						type: "success",
					});
					this.$emit('resetATableFn', 'resetApprovlCombox')
					this.onCancel();
					return;
				}

				if (res.data.code === 452) {
					MessageBox.alert(res.data.msg, '', {
						type: 'warning',
					})
					this.onCancel();
					return;
				}

				if (res.data.code === -311) {
					window.open(res.data.data);
					this.onCancel();
					return;
				}
				this.$message({
					message: res.data.msg,
					type: "error",
				});

			} catch (error) {
				this.loadingFlg = false;
			}
		},

		//表单提交
		async submitUpload1() {
			this.$refs.upload.submit();
		},
		//表单取消
		onCancel() {
			this.fileList = [];
			this.$emit("CloseExprotDiloag");
		},
	},
	created() { },
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.import-dialog-view {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;

	.import-dialog {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 488px;
		min-height: 393px;
		background: #ffffff;
		box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
			0px 9px 28px 0px rgba(0, 0, 0, 0.08),
			0px 6px 16px -8px rgba(0, 0, 0, 0.15);

		.title {
			// width: 100%;
			height: 42px;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px;
			font-size: 16px;

			p {
				font-weight: bold;
				color: rgba(0, 0, 0, 0.85);
			}

			.el-icon-close {
				cursor: pointer;
			}
		}
	}

	.upload-demo {
		width: 360px;
		margin: 0 auto;
		margin-top: 24px;
	}

	.check-view {
		margin: 36px 24px 0 24px;
		height: 32px;
		padding: 0 18px;
		background: #f0f0f0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.check-view1 {
		margin: 36px 24px 0 24px;
		height: 32px;
		padding: 0 18px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.check-view1 .label {
		margin-right: 16px;
		font-weight: bold;
		font-size: 16px;
		color: rgba(0, 0, 0, 0.85);
	}

	.radio-option {
		margin-right: 16px;
		font-size: 14px;
	}


	.dialog-footer {
		margin: 24px 0;
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			width: 82px !important;
			height: 32px;
			// background: #ffffff;
			// border: 1px solid #d9d9d9;
			// cursor: pointer;
			line-height: 0;
		}

		button:nth-child(2) {
			margin-left: 16px;
			// color: #ffffff;
			// background: #106ebe;
		}

		::v-deep .el-button:hover,
		.el-button:focus {
			color: none;
		}
	}
}
</style>
